<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-27 19:35:44
 * 天凉好个秋
-->
<template>
    <!-- 存在关键字，展示搜索建议 -->
    <div class="searchPopover has" v-show="hasSearchkey">
        <!-- 单曲 -->
        <div class="suggestClass" v-if="searchSuggest.songs?.length">
            <div class="title">
                <SvgIcon name="singleSong-icon" size="16" class="mx-2"></SvgIcon>
                {{ t('navbar.search.singleSong') }}
            </div>
            <div
                class="suggestItem"
                v-for="(item, index) in searchSuggest.songs"
                :key="index"
                v-html="keywordHighLight(item?.name as string, props.searchkey)"
            ></div>
        </div>
        <!-- 歌手 -->
        <div class="suggestClass" v-if="searchSuggest.artists?.length">
            <div class="title">
                <SvgIcon name="artist-icon" size="16" class="mx-2"></SvgIcon>
                {{ t('navbar.search.singer') }}
            </div>
            <div
                class="suggestItem"
                v-for="(item, index) in searchSuggest.artists"
                :key="index"
                v-html="keywordHighLight(item?.name as string, props.searchkey)"
            ></div>
        </div>
        <!-- 专辑 -->
        <div class="suggestClass" v-if="searchSuggest.albums?.length">
            <div class="title">
                <SvgIcon name="album-icon" size="16" class="mx-2"></SvgIcon>
                {{ t('navbar.search.album') }}
            </div>
            <div
                class="suggestItem"
                v-for="(item, index) in searchSuggest.albums"
                :key="index"
                v-html="keywordHighLight(item?.name as string, props.searchkey)"
            ></div>
        </div>
        <!-- 歌单 -->
        <div class="suggestClass" v-if="searchSuggest.playlists?.length">
            <div class="title">
                <SvgIcon name="songList-icon" size="16" class="mx-2"></SvgIcon>
                {{ t('navbar.search.songList') }}
            </div>
            <div
                class="suggestItem"
                v-for="(item, index) in searchSuggest.playlists"
                :key="index"
                v-html="keywordHighLight(item?.name as string, props.searchkey)"
            ></div>
        </div>
    </div>
    <!-- 不存在关键字， 展示搜索历史和热搜 -->
    <div class="searchPopover nothas" v-show="!hasSearchkey">
        <!-- 搜索历史 -->
        <div class="px-4 history" v-if="searchHistory.length">
            <div class="title flex-c">
                <span class="mr-2">{{ t('navbar.search.history') }}</span>
                <SvgIcon name="trash" size="16" hover @click="removeAll" />
            </div>
            <div class="historyContent">
                <div
                    class="relative historyItem flex-c-c"
                    :class="{ 'hover': item === curHistoryItem }"
                    v-for="item in searchHistory.slice(0, 10)"
                    :key="item"
                    @click="toSearch(item)"
                    @mouseenter="enter(item)"
                    @mouseleave="leave"
                >
                    {{ item }}
                    <span
                        class="delBtn"
                        v-if="item === curHistoryItem"
                        @click.stop="delHistory(item)"
                    >x</span>
                </div>
            </div>
        </div>
        <!-- 热搜榜 -->
        <div class="hotSearch">
            <div class="px-4 title flex-c">
                <span>{{ t('navbar.search.hotSearch') }}</span>
            </div>
            <div
                class="hotSearchItem flex-c"
                v-for="(item, index) in hotSearchList"
                :key="item.score"
                @click="toSearch(item.searchWord)"
            >
                <div class="index flex-c-c" :class="{ 'top3': index + 1 < 4 }">{{ index + 1 }}</div>
                <div class="detail flex-col-e">
                    <div class="flex-c top">
                        <span class="mr-2 name">{{ item.searchWord }}</span>
                        <img class="h-3 mr-2" :src="item.iconUrl" v-if="item.iconUrl" />
                        <span class="score">{{ item.score }}</span>
                    </div>
                    <div class="bottom">{{ item.content }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { getSearchSuggest, getHotSearch } from '@/service/api/search/search'
import type { IHotSearch, ISearchSuggest } from '@/service/api/search/types'
import { ref, watch, watchEffect, computed } from 'vue';
import { useLocalStorage } from '@/hooks/localStorage/useLocalStorage'
import { useI18n } from '@/hooks/locales/useI18N'
import { useView } from '@/hooks/view/useView'
import SvgIcon from '../svgIcon/svgIcon.vue'

const props = defineProps({
    searchkey: {
        type: String,
        required: true
    }
})
const emit = defineEmits(['search', 'close'])

const { t } = useI18n()
const { keywordHighLight } = useView()
const { getHistorySearch, removeHistorySearch, clearHistorySearch } = useLocalStorage()

// 搜索历史列表
const searchHistory = ref(getHistorySearch())
// 热搜列表
const hotSearchList = ref<Array<IHotSearch>>([])
// 搜索建议
const searchSuggest = ref<ISearchSuggest>({})

// 搜搜关键字是否为空
const hasSearchkey = computed(() => props.searchkey !== '')

// 关键字变化时请求搜索建议
watchEffect(async () => {
    if (props.searchkey === '') {    //更新搜索记录、热搜列表
        searchHistory.value = getHistorySearch()
        const { data } = await getHotSearch()
        hotSearchList.value = data
    } else {    //获取搜索建议
        const { result } = await getSearchSuggest(props.searchkey)
        // 仅当result拥有'order'属性时才算有数据，执行替换操作
        if(Object(result).hasOwnProperty('order')) {
            searchSuggest.value = result
        }
    }
})

// 当前鼠标指向的历史记录
const curHistoryItem = ref('')
// 鼠标移入
const enter = (str: string) => {
    curHistoryItem.value = str
}
// 鼠标移出
const leave = () => {
    curHistoryItem.value = ''
}
// 删除单个历史记录
const delHistory = (str: string) => {
    removeHistorySearch(str)
    searchHistory.value = getHistorySearch()
}
// 删除所有历史记录
const removeAll = () => {
    clearHistorySearch()
    searchHistory.value = getHistorySearch()
}
// 点击搜索
const toSearch = (str: string) => {
    emit('search', str)
}

</script>

<style scoped lang='scss'>
.searchPopover {
    height: 400px;
    padding: 12px 0;
    overflow-y: scroll;
    color: $common-text-color;
}
.has {
    width: 356px;
    .suggestClass {
        width: 100%;
        .title {
            @apply flex items-center h-10;
            color: $sub-text-color;
        }
        .suggestItem {
            @apply flex items-center pl-7 h-7;
            font-size: 13px;
            color: $common-text-color;
        }
    }
}
.history {
    @apply whitespace-nowrap;
    width: 325px;
    .historyContent {
        @apply w-full flex flex-wrap;
        .historyItem {
            height: 24px;
            padding: 0 16px;
            margin-right: 10px;
            margin-top: 5px;
            border-radius: 99px;
            font-size: 12px;
            cursor: pointer;
            border: 1px solid $main-border-color;

            .delBtn {
                position: absolute;
                right: 5px;
                color: $sub-text-color;
            }
        }
    }
}
.hotSearch {
    @apply whitespace-nowrap;
    width: 356px;
    .title {
        height: 50px;
    }
    .hotSearchItem {
        @apply w-full h-12 mb-1 cursor-pointer;
        &:hover {
            background-color: $active-bg-color;
        }
        .index {
            @apply w-11 h-full text-base;
            color: $sub-text-color;
        }
        .top3 {
            color: #ff3a3a;
            font-weight: bold;
        }
        .detail {
            width: 312px;
            height: 100%;
            .top {
                .name {
                    color: $main-text-color;
                    font-size: 12px;
                    font-weight: bold;
                }
                .score {
                    color: $sub-text-color;
                    font-size: 12px;
                    opacity: 0.7;
                    font-weight: 200;
                }
            }
            .bottom {
                color: $sub-text-color;
                font-size: 11px;
                overflow: hidden;
                white-space: nowrap;
                font-weight: 300;
                text-overflow: ellipsis;
            }
        }
    }
}
</style>